/*
 * Copyright © 2016-2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.scss";

.page-not-found {
  .namespace-not-found {
    font-size: 14px;

    .open-namespace-wizard-link {
      color: $cdap_orange;
      cursor: pointer;
      margin: 0 5px;
    }
  }
}

.entity-list-view {
  height: calc(100vh - 155px);
  align-items: flex-start;
  overflow-x: hidden;

  .entities-container {
    padding: 0 0 0 5px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    &.error-holder {
      height: 100%;
      align-items: center;
      justify-content: center;
    }
    .entities-all-list-container {
      display: inline-flex;
      flex-wrap: wrap;
      height: 100%;
      flex: 1;
      width: 100%;
    }

    .home-list-view-container {
      display: inline-flex;
      flex-wrap: wrap;
      height: 100%;
      flex: 1;
      // FIXME: For later use.
      // transition: 1s ease-in width, 1s ease-in flex;

      /*
        width of each card = 100% - (padding of parent) - (combined margin of all cards in the row)
        margin for each card is 5px (as mentioned above).
        So the combined margin for all cards in say ,
          4 column layout : 5px + (5px + 5px) + (5px + 5px) + 5px = (3 * 10px)
          5 column layout : 5px + (5px + 5px) + (5px + 5px) + (5px + 5px) + 5px = (4 * 10px)
          6 column layout : 5px + (5px + 5px) + (5px + 5px) + (5px + 5px) + (5px + 5px) + 5px = (5 * 10px)
          n column layout : (n-1 * 10px);
      */

      @media (min-width: 1701px) {
        .entity-cards {
          width: calc((100% - 20px - 10px - (6 * 10px)) / 7);
        }
      }

      @media (min-width: 1601px) and (max-width: 1700px) {
        .entity-cards {
          width: calc((100% - 20px - 10px - (5 * 10px)) / 6);
        }
      }

      @media (min-width: 1201px) and (max-width: 1600px) {
        .entity-cards {
          width: calc((100% - 20px - 10px - (4 * 10px)) / 5);
        }
      }

      @media (min-width: 993px) and (max-width: 1200px) {
        .entity-cards {
          width: calc((100% - 20px - 10px - (3 * 10px)) / 4);
        }
      }

      @media(min-width: 768px) and (max-width: 992px) {
        .entity-cards {
          width: calc((100% - 20px - 10px - (2 * 10px)) / 3);
        }
      }

      @media(min-width: 500px) and (max-width: 767px) {
        .entity-cards {
          width: calc((100% - 20px - 10px - 10px) / 2);
        }
      }

      @media(max-width: 499px) {
        .entity-cards {
          width: calc((100% - 20px - 10px));
        }
      }

      &.show-overview-main-container {
        flex: 1 1;

        /*
          width of each card = 100% - (padding of parent) - (combined margin of all cards in the row)
          margin for each card is 5px (as mentioned above).
          So the combined margin for all cards in say ,
            4 column layout : 5px + (5px + 5px) + (5px + 5px) + 5px = (3 * 10px)
            5 column layout : 5px + (5px + 5px) + (5px + 5px) + (5px + 5px) + 5px = (4 * 10px)
            6 column layout : 5px + (5px + 5px) + (5px + 5px) + (5px + 5px) + (5px + 5px) + 5px = (5 * 10px)
            n column layout : (n-1 * 10px);
        */

        @media(min-width: 2001px) {
          .entity-cards {
            width: calc((100% - 20px - 10px - (5 * 10px)) / 6);
          }
        }

        @media (min-width: 1801px) and (max-width: 2000px) {
          .entity-cards {
            width: calc((100% - 20px - 10px - (4 * 10px)) / 5);
          }
        }

        @media (min-width: 1601px) and (max-width: 1800px) {
          .entity-cards {
            width: calc((100% - 20px - 10px - (3 * 10px)) / 4);
          }
        }

        @media (min-width: 1400px) and (max-width: 1600px) {
          .entity-cards {
            width: calc((100% - 20px - 10px - (2 * 10px)) / 3);
          }
        }

        @media (min-width: 1200px) and (max-width: 1399px) {
          .entity-cards {
            width: calc((100% - 20px - 10px - 10px) / 2);
          }
        }

        @media (max-width: 1199px) {
          .entity-cards {
            width: calc(100% - 20px - 10px);
          }
        }
      }
    }
    .entity-cards {
      &.active {
        .cask-card {
          .card-header {
            .entity-card-header {
              border-right: 0;
              border-left: 0;
              border-top: 0;
            }
          }
          .card-body {
            border-bottom: 0;
          }
        }
      }
    }

  }
  .loading-spinner {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: gray;
  }

  .empty-message {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 500;

    &.text-danger {
      .fa-exclamation-triangle {
        margin-right: 5px;
      }
    }
  }

  .retry-now { margin-top: 10px; }
}
